<template>
  <el-card class="card-box" shadow="never">
    <common-title title='审批中心' arrowTitle="全部" @handleLink='handleLink'></common-title>
    <div class="tabs">
      <span v-for="item in tabList" :key='item.value' :class='isCurrent == item.value ? "current" : ""'
        @click="changeTab(item)">{{item.name}}</span>
    </div>

    <div class="data-wrap">
      <ul :loading="loading" v-if='tableData?.length'>
        <li v-for="(item,index) in tableData" :key="index" @click="toDetail(item)">
          <span class="title">{{item.billName}}</span>
          <span class="time">{{item.createTime}}</span>
        </li>
      </ul>
      <el-empty :image-size="60" description="暂无数据" v-else></el-empty>
    </div>
  </el-card>

</template>

<script lang="ts" setup>
  import { ref, reactive, onMounted } from "vue";
  import { useRouter } from "vue-router";
  import NotifMessage from "/@/utils/message/notification";
  import commonTitle from "./commonTitle.vue";
  import { postBills } from "/@/api/work";
  import { flowQueryNotify } from "/@/api/work";
  import { storageLocal } from "/@/utils/storage";
  import { equipType } from "/@/views/approval/types";
  const router = useRouter();
  const loading = ref<boolean>(false);
  const tabList = reactive([
    {
      name: "待办", value: "todo"
    },
    {
      name: "待阅", value: "toRead"
    }
  ]);

  const isCurrent = ref("toRead")
  const tableData = ref([])
  let formSearchTodo = reactive({
    billName: "",
    billNum: "",
    projectName: "",
    projectStage: "",
    billType: "",
    billState: "",
    pageNum: 1,
    pageSize: 3,
    flowStatus: "5"
  });
  let formSearchToRead = reactive({
    accepter: storageLocal.getItem("info")?.userId,
    feedback: "N",
    billNameLike: "",
    billNumLike: "",
    projectNameLike: "",
    pageNum: 1,
    pageSize: 3
  });

  const changeTab = (item : any) => {
    isCurrent.value = item.value;
    tableData.value = [];
    if(isCurrent.value == "todo"){
      getTableToDo()
    }
    else{
      getTableToRead()
    }
  };

  const getTableToDo = async (obj : Object = {}) => {
    try {
      loading.value = true;
      const { code, data,message } = await postBills(formSearchTodo);
      loading.value = false;
      if (code === 200) {
        tableData.value = data?.list || [];
      }
      else {
        NotifMessage.error(message || "获取数据异常");
      }
    } catch (err) {
      console.log(err);
    }
  };

  const getTableToRead = async (obj : Object = {}) => {
    try {
      loading.value = true;
      const { code, data,message } = await flowQueryNotify(formSearchToRead);
      loading.value = false;
      if (code === 200) {
        tableData.value = data?.list || [];
      }
      else {
        NotifMessage.error(message || "获取数据异常");
      }
    } catch (err) {
      console.log(err);
    }
  };

  const handleLink = async () => {
    router.push(`/approval/todo`)
  };

  const toDetail = async (row) => {
    if(isCurrent.value == "todo"){
      const {
        contractId,
        nodeId,
        instanceId,
        flowId,
        preNodeId,
        billType,
        flowBaseId,
        billNum = ""
      } = row;
      let pathUrl = "/projectsA/acceptance/arrival/detail";
      let pathQuery = {
        mode: "read",
        contractId,
        nodeDefId: instanceId ? nodeId.toUpperCase() : "ACT_010",
        instanceId,
        flowId,
        source: "work",
        back: "todo",
        preNodeId,
        billNum,
        flowType: billType
      };

      if (billType && ["5", "6"].includes(billType)) {
        pathUrl = "/projectsA/acceptance/concealed/detail";
        pathQuery = Object.assign(pathQuery, {
          flowMinType: billType,
          contractId: flowBaseId
        });
      } else if (billType && ["7", "8"].includes(billType)) {
        pathUrl = "/projectsA/acceptance/completed/detail";
        pathQuery = Object.assign(pathQuery, {
          flowMinType: billType,
          contractId: flowBaseId
        });
      } else if (billType && ["9", "10"].includes(billType)) {
        pathUrl = "/projectsA/acceptance/material/detail";
        pathQuery = Object.assign(pathQuery, {
          flowMinType: billType,
          contractId: flowBaseId
        });
      } else if (billType && ["11", "15"].includes(billType)) {
        pathUrl = "/projectsA/quality/inspection/detail";
        pathQuery = Object.assign(pathQuery, {
          flowMinType: billType,
          contractId: flowBaseId
        });
      } else if (billType && equipType.includes(billType)) {
        pathUrl = "/approval/detail";
        pathQuery = Object.assign(pathQuery, {
          mode: "add",
          taskId: row.taskId,
          contractId: flowBaseId,
          flowType: row.billType
        });
      } else if (billType && ["1016", "1017"].includes(billType)) {
        pathUrl = "/approval/detail";
        pathQuery = Object.assign(pathQuery, {
          mode: "add",
          taskId: row.taskId,
          contractId: flowBaseId,
          flowType: row.billType,
          billName: row.billName,
          module: "material"
        });
      } else if (billType && ["1015"].includes(billType)) {
        pathUrl = "/approval/construction";
        pathQuery = Object.assign(pathQuery, {
          mode: "add",
          taskId: row.taskId,
          contractId: flowBaseId,
          billName: row.billName,
          flowType: row.billType
        });
      }
      switch (billType) {
        case "1018":
        case "1019":
          // 隐蔽验收
          pathUrl = "/approval/detail";
          pathQuery = Object.assign(pathQuery, {
            mode: "add",
            taskId: row.taskId,
            contractId: flowBaseId,
            billName: row.billName,
            flowType: row.billType,
            module: "conceal"
          });
          break;
        case "1020":
        case "1021":
          // 施工试验&见证检测
          pathUrl = "/approval/detail";
          pathQuery = Object.assign(pathQuery, {
            mode: "add",
            taskId: row.taskId,
            contractId: flowBaseId,
            billName: row.billName,
            flowType: row.billType,
            module: "witness"
          });
          break;
        case "1022":
          // 其他问题（随手拍）
          pathUrl = "/approval/detail";
          pathQuery = Object.assign(pathQuery, {
            mode: "add",
            taskId: row.taskId,
            contractId: flowBaseId,
            billName: row.billName,
            flowType: row.billType,
            module: "snap"
          });
          break;
        case "1032":
          // 车辆出入
          pathUrl = "/approval/detail";
          pathQuery = Object.assign(pathQuery, {
            mode: "add",
            taskId: row.taskId,
            contractId: flowBaseId,
            billName: row.billName,
            flowType: row.billType,
            module: "vehicle"
          });
          break;
        case "1030":
          // 安全文明
          pathUrl = "/approval/construction";
          pathQuery = Object.assign(pathQuery, {
            mode: "add",
            taskId: row.taskId,
            contractId: flowBaseId,
            billName: row.billName,
            flowType: row.billType,
            module: "civiliz"
          });
          break;
        case "1031":
          //开工通知
          pathUrl = "/approval/detail";
          pathQuery = Object.assign(pathQuery, {
            mode: "add",
            taskId: row.taskId,
            contractId: flowBaseId,
            billName: row.billName,
            flowType: row.billType,
            module: "inspection"
          });
        default:
          break;
      }
      if (Number(billType) >= 1130 && Number(billType) <= 1148) {
        pathUrl = "/approval/detail";
        pathQuery = Object.assign(pathQuery, {
          mode: "add",
          taskId: row.taskId,
          contractId: flowBaseId,
          billName: row.billName,
          flowType: row.billType
          // module: Number(billType) == 1031 ? "inspection" : ""
        });
      }
      router.push({
        path: pathUrl,
        query: pathQuery
      });
    }
    else if(isCurrent.value == "toRead"){
      const {
        contractId,
        instanceId,
        flowId,
        preNodeId,
        billType,
        flowBaseId,
        nodeStatusCode,
        procInstId,
        taskId,
        billNum = ""
      } = row;
      let pathUrl = "/approval/detail";
      let pathQuery = {
        mode: "read",
        contractId,
        nodeDefId: flowBaseId ? nodeStatusCode.toUpperCase() : "ACT_010",
        instanceId: instanceId || procInstId,
        flowId,
        source: "work",
        back: "toRead",
        approvalType: "notify",
        readId: row.id,
        preNodeId,
        taskId,
        billNum,
        flowType: billType
      };

      if (billType && ["5", "6"].includes(billType)) {
        pathUrl = "/projectsA/acceptance/concealed/detail";
        pathQuery = Object.assign(pathQuery, {
          flowMinType: billType,
          contractId: flowBaseId
        });
      } else if (billType && ["7", "8"].includes(billType)) {
        pathUrl = "/projectsA/acceptance/completed/detail";
        pathQuery = Object.assign(pathQuery, {
          flowMinType: billType,
          contractId: flowBaseId
        });
      } else if (billType && ["9", "10"].includes(billType)) {
        pathUrl = "/projectsA/acceptance/material/detail";
        pathQuery = Object.assign(pathQuery, {
          flowMinType: billType,
          contractId: flowBaseId
        });
      } else if (billType && ["11", "15"].includes(billType)) {
        pathUrl = "/projectsA/quality/inspection/detail";
        pathQuery = Object.assign(pathQuery, {
          flowMinType: billType,
          contractId: flowBaseId
        });
      } else if (billType && equipType.includes(billType)) {
        pathUrl = "/approval/detail";
        pathQuery = Object.assign(pathQuery, {
          taskId: row.taskId,
          contractId: flowBaseId
        });
      }

      switch (billType) {
        case "1015":
          pathUrl = "/approval/construction";
          pathQuery = Object.assign(pathQuery, {
            taskId: row.taskId,
            contractId: flowBaseId,
            billName: row.billName,
            flowType: row.billType
          });
          break;
        case "1016":
        case "1017":
          pathUrl = "/approval/detail";
          pathQuery = Object.assign(pathQuery, {
            taskId: row.taskId,
            contractId: flowBaseId,
            flowType: row.billType,
            module: "material"
          });
          break;
        case "1018":
        case "1019":
          // 隐蔽验收
          pathUrl = "/approval/detail";
          pathQuery = Object.assign(pathQuery, {
            taskId: row.taskId,
            contractId: flowBaseId,
            billName: row.billName,
            flowType: row.billType,
            module: "conceal"
          });
          break;
        case "1020":
        case "1021":
          // 施工试验&见证检测
          pathUrl = "/approval/detail";
          pathQuery = Object.assign(pathQuery, {
            taskId: row.taskId,
            contractId: flowBaseId,
            billName: row.billName,
            flowType: row.billType,
            module: "witness"
          });
          break;
        case "1022":
          // 其他问题（随手拍）
          pathUrl = "/approval/detail";
          pathQuery = Object.assign(pathQuery, {
            taskId: row.taskId,
            contractId: flowBaseId,
            billName: row.billName,
            flowType: row.billType,
            module: "snap"
          });
          break;
        case "1032":
          // 车辆出入
          pathUrl = "/approval/detail";
          pathQuery = Object.assign(pathQuery, {
            taskId: row.taskId,
            contractId: flowBaseId,
            billName: row.billName,
            flowType: row.billType,
            module: "vehicle"
          });
          break;
        case "1030":
          // 安全文明
          pathUrl = "/approval/construction";
          pathQuery = Object.assign(pathQuery, {
            taskId: row.taskId,
            contractId: flowBaseId,
            billName: row.billName,
            flowType: row.billType,
            module: "civiliz"
          });
          break;
        default:
          break;
      }
      if (
        Number(billType) >= 1031 &&
        Number(billType) <= 1148 &&
        Number(billType) !== 1032
      ) {
        pathUrl = "/approval/detail";
        pathQuery = Object.assign(pathQuery, {
          taskId: row.taskId,
          contractId: flowBaseId,
          billName: row.billName,
          flowType: row.billType,
          module: Number(billType) == 1031 ? "inspection" : ""
        });
      }
      router.push({
        path: pathUrl,
        query: pathQuery
      });
    }
  }

  onMounted(() => {
    getTableToRead();
  });
</script>

<style lang="scss" scoped>
  .card-box {
    width: 33%;
    border-radius: 8px;
    box-shadow: none !important;

    :deep(.el-card__body) {
      padding: 10px 16px 16px 2px;
    }

    .tabs {
      display: flex;
      align-items: center;
      border-bottom: 1px solid #F0F0F0;
      padding-left: 16px;

      span {
        font-size: 14px;
        line-height: 22px;
        color: #666666;
        margin-right: 32px;
        cursor: pointer;
        padding: 8px 0;
      }

      .current {
        color: #666666;
        font-weight: 600;
        border-bottom: 2px solid #0073E5;
        border-radius: 6px 6px 0 0;
      }
    }
    .data-wrap{
      height:170px;
      ul {
        padding: 16px 12px 0 12px;
        li {
          display: flex;
          justify-content: space-between;
          align-items: flex-start;
          cursor:pointer;
          .title {
            font-size: 14px;
            line-height: 22px;
            color: #0B0D0F;
            flex: 0.9;
            overflow: hidden;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            text-overflow: ellipsis;
            white-space: normal;
          }

          .time {
            font-size: 12px;
            line-height: 20px;
            color: #999999;
          }
        }

        li:not(:last-child) {
          margin-bottom: 12px;
        }
      }
    }
  }
</style>
